<template>
    <view class="system-page">
        <view class="system-nav">
            <uni-nav-bar 
                left-icon="" 
                title="扫码结果列表"
                color="#fff"
                backgroundColor="transparent"
                :statusBar="true"
                :border="false"
            ></uni-nav-bar>
        </view>
        <view class="system-contain">
            <view class="system-header">
                <view class="result-title">扫码结果</view>
                <scroll-view :scroll-y="true" class="result-scroll">
                    <view class="result-li" v-for="(ele,index) in list" :key="index">
                        <view class="result-badge result-badge-record" v-if="ele['status']==='录制中'">{{index+1}}</view>
                        <view class="result-badge" v-if="ele['status']==='已完成'">{{index+1}}</view>
                        <view class="result-code">
                            <view>
                                <text>任务编号：</text>
                                <text>{{ele['tsakCode']}}</text>
                            </view>
                            <text class="result-record" v-if="ele['status']==='录制中'">录制中</text>
                            <text class="result-success" v-if="ele['status']==='已完成'">已完成</text>
                        </view>
                        <view class="start-time">开始时间：{{ele['startTime']}}</view>
                        <view class="end-time">结束时间：{{ele['endTime']}}</view>
                    </view>
                </scroll-view>
                <view class="result-btn">
                    <button hover-class="btn_click" class="result-error" @click.native.prevent="onFinish">结束</button>
                    <button hover-class="btn_click" class="result-primary" @click.native.prevent="onContinueScanCode">继续扫码</button>
                </view>
            </view>
            <!-- 普通弹窗 -->
            <uni-popup ref="onStopRecord" :maskClick="false">
                <view class="popup-wrap">
                    <view class="popup-content">
                        <view class="popup-h">录制完成</view>
                        <view class="popup-p">本次录制时长为{{hour}}:{{minute}}:{{second}}，可以在实验视频管理页面查看。</view>
                        <view class="popup-btn">
                            <button hover-class="btn_click" class="popup-error" @click.native.prevent="onCancel">取消</button>
                            <button hover-class="btn_click" class="popup-primary" @click.native.prevent="onSubmit">确认</button>
                        </view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
// 视频录制
import { appRecordVideo, uploadVideo } from '@/service/common';

export default {
    name: 'ScanCodeResultListPage',
    data() {
        return {
            list: [],
            hour: '00',
            minute: '00',
            second: '00'
        }
    },
    created() {
        // 设置时分秒
        const startTime = this.$store.state.sampleScanCodeStartTime
        const updateTime = () => {
            const date = this.diff(startTime, new Date())
            this.hour = date['hours']
            this.minute = date['minutes']
            this.second = date['seconds']
        }
        // 先执行
        updateTime()
        // 计时器
        this.timer = setInterval(updateTime, 1000);
        // 赋值
        this.list = this.$store.state.sampleScanCodeList;
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer)
    },
    methods: {
        strFormat(str) {
            return str < 10 ? `0${str}` : str;
        },
        diff(start, end) {
            const duration = this.$Moment.duration(this.$Moment(end).diff(this.$Moment(start)))
            // 获取时间差中的小时数、分钟数和秒数
            const hours = this.strFormat(duration.hours())
            const minutes = this.strFormat(duration.minutes())
            const seconds = this.strFormat(duration.seconds())

            if( hours > 0 || minutes > 0 || seconds > 30 ) {
                // 大于三十秒,主动结束视频
                this.onSubmit();
            }

            return {
                hours,
                minutes,
                seconds
            }
        },
        // 结束
        onFinish() {
            this.$refs.onStopRecord.open('center')
        },
        onCancel() {
            this.$refs.onStopRecord.close()
        },
        async onSubmit() {
            this.onCancel()
            await this.onContinueScanCode(true);
            this.timer && clearInterval(this.timer);
            let url = `/pages/cloudRecordScanCode/index`;
            this.$Router.redirect(url);
        },
        // 继续扫码
        async onContinueScanCode(isOver=false) {
            // 获取数据
            let l = this.$store.state.sampleScanCodeList.length
            let sampleInfo = this.$store.state.sampleScanCodeList[l-1]
            if( sampleInfo['status'] === '录制中' ) {
                // 设置结束时间
                sampleInfo['endTime'] = this.$Moment().format('YYYY-MM-DD HH:mm:ss');
                // 设置完成状态
                sampleInfo['status'] = '已完成';
                // 传递参数
                let startTime1 = sampleInfo['startTime'];
                let endTime1 = sampleInfo['endTime'];
                // 处理时间
                let startTime = sampleInfo['startTime'].replace(/(-|:| )/g, '');
                let endTime = sampleInfo['endTime'].replace(/(-|:| )/g, '');
                // 转换表单
                let form = this.$store.state.cloudRecordForm;
                let body = {
                    sampleId: sampleInfo['sampleId'],
                    startTime: String((startTime - 5)),
                    endTime: String((endTime - 5)),
                    deviceSerial: form['deviceName'],
                    localIndex: form['deviceChannelNumber'],
                    videoContent: ''
                };
                try {
                    let res = await appRecordVideo(body);
                    if( res['data']['taskId'] ) {
                        this.show_Toast('none', '视频上传失败');
                    }
                    body['taskId'] = res['data']['taskId'];
                    // 重新改造时间参数
                    let body1 = {
                        ...body,
                        startTime: startTime1,
                        endTime: endTime1,
                        videoContent: form['experimentalType']
                    };
                    // 上传视频到服务器 - 需要延迟
                    let next = async () => {
                        let res1 = await uploadVideo(body1)
                        if( res1['code'] !== 200 ) {
                            // next();
                        }
                    }
                    let timer = setTimeout(async () => {
                        next();
                        clearTimeout(timer);
                    }, 1000*3)
                } catch(err) {
                    this.show_Toast('none', err);
                }
            }
            // 设置开始时间
            this.$store.commit('SET_SAMPLE_SCAN_CODE_START_TIME', sampleInfo['endTime']);
            if( isOver !== true ) {
                // 开始扫码
                uni.scanCode({
                    onlyFromCamera: true,
                    scanType: ['qrCode', 'datamatrix', 'pdf417'],
                    success: (res) => {
                        if( res.result.includes('sampleId') ) {
                            let url = `/pages/scanCodePrompt/index?${res.result}`;
                            this.$Router.redirect(url);
                        }
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.system-page {
    height: 100%;
    background-color: #F5F5F5;
    .system-nav {
        height: 350rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url($uni-image-ip+'/clude-nav.png');
    }
    .system-contain {
        display: flex;
        justify-content: center;
        margin-top: -100rpx;
        height: calc(100% - 350rpx);
        .system-header {
            border-radius: 20rpx;
            background-color: #ffffff;
            width: 678rpx;
            box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(44, 51, 44, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #1D2129;
            padding-left: 20rpx;
            padding-right: 20rpx;
            padding-bottom: 50rpx;
            .result-title {
                padding-top: 40rpx;
                padding-bottom: 10rpx;
                font-size: 32rpx;
            }
            .result-li {
                width: 100%;
                border-radius: 8rpx;
                padding-left: 40rpx;
                padding-right: 40rpx;
                padding-top: 20rpx;
                padding-bottom: 26rpx;
                box-sizing: border-box;
                font-size: 28rpx;
                color: #1D2129;
                // background-color: rgba(0,0,0,.1);
                background-color: #F0F3FE;
                margin-top: 20rpx;
                position: relative;
            }
            .result-scroll {
                flex: 1;
                box-sizing: border-box;
                padding-top: 20rpx;
                padding-bottom: 20rpx;
                overflow: hidden;
            }
            .result-badge {
                position: absolute;
                top: -4px;
                left: 0px;
                color: #fff;
                font-size: 8px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                border-radius: 50%;
                background-color: #6DD400;
            }
            .result-badge-record {
                background-color: #dd524d;
            }
            .result-success {
                color: #6DD400;
            }
            .result-record {
                color: #dd524d;
            }
            .result-code {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .start-time {
                margin-top: 22rpx;
                color: #86909C;
                font-size: 24rpx;
            }
            .end-time {
                margin-top: 16rpx;
                color: #86909C;
                font-size: 24rpx;
            }
            .result-btn {
                display: flex;
                justify-content: space-between;
                width: 100%;
                .result-error {
                    height: 66rpx;
                    font-size: 24rpx;
                    color: #fff;
                    width: 45%;
                    background-color: $uni-color-error;
                }
                .result-primary {
                    height: 66rpx;
                    font-size: 24rpx;
                    color: #fff;
                    width: 45%;
                    background-color: $uni-color-primary;
                }
            }
        }
    }
    .popup-wrap {
        padding-left: 40rpx;
        padding-right: 40rpx;
    }
    .popup-content {
        background-color: rgba(255,255,255,1);
        text-align: center;
        padding-left: 30rpx;
        padding-right: 30rpx;
        border-radius: 20rpx;
        .popup-h {
            color: #1D2129;
            font-size: 34rpx;
            line-height: 44rpx;
            padding-top: 44rpx;
            padding-bottom: 44rpx;
        }
        .popup-p {
            color: #1D2129;
            font-size: 26rpx;
        }
        .popup-btn {
            padding-top: 44rpx;
            padding-bottom: 44rpx;
            display: flex;
            .popup-error {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
            }
            .popup-primary {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
                background-color: $uni-color-primary;
                color: #fff;
            }
        }
    }
}
</style>